<template>
  <HerinContainer class="MainCoal-box" :delay="1" direction="Right" title="抽采量分析">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="gas-right-top-title">
        <HerinSelect
          v-model="selectValue"
          class="herin-select"
          :options="selectOptions"
          place-holder=""
          :height="34"
          :width="160"
          :showOptionscount="8"
          @HerinSelectChange="change"
          style="background-color: rgba(255, 255, 255, 0.1)"
        />
        <div class="position">
          <img src="@/assets/img/monitor/icon-6.png" alt="">
          <span>{{monitorLoc}}</span>
        </div>
      </div>
      <div class="gas-right-top-chart">
        <RigthItem
          v-for="(item,index) in chartLists"
          :key="index"
          :color="[color[index]]"
          :unit="unit[index]"
          :itemTitle="titleLists[index]"
          :itemNum="item.num"
          :chartDatas="item.data"
          :height="height[index]"
        ></RigthItem>
      </div>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import RigthItem from './rigthItem.vue';

import { getAllCode, queryGasAnalyse } from '@/api/item/monitor/gas';
import { xFormat } from '@/utils/date';
export default {
  data() {
    return {
      selectValue: '',
      selectOption: [],
      selectKeys: '',
      color: ['#00FDFF', '#FFD101', '#57FFAA'],
      unit: ['m³', '万m³', '万m³'],
      titleLists: ['今日抽采量', '近七天抽采量', '近30天抽采量'],
      height: ['12.8125rem', '12.75rem', '12.75rem'],
      chartLists: [],
      monitorLoc: '',
      actionLoopTimer3S: null,
      actionLoopTimer1H: null
    };
  },

  components: {
    HerinContainer,
    HerinSelect,
    RigthItem
  },

  computed: {
    selectOptions() {
      return this.selectOption.map(item => {
        return {
          label: item,
          value: item
        };
      });
    }
  },

  watch: {
    selectOption: {
      handler(value) {
        if (value) {
          this.selectValue = value[0];
          this.queryGasAnalyse();
        }
      },
      deep: true
    }
  },

  mounted() {
    // this.startActionLoop3S(this.getAllCode);
    this.getAllCode();
    this.startActionLoop1H(this.queryGasAnalyse);
  },

  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },

  methods: {
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1小时 循环查询
    startActionLoop1H(callback) {
      callback();
      // 3600000
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    change(val) {
      this.selectValue = val;
      this.queryGasAnalyse();
    },

    // 获取所有区域编号
    async getAllCode() {
      const res = await getAllCode();
      if (res.data.code === 200) {
        this.selectOption = res.data.data;
      }
    },

    // 抽采量分析
    async queryGasAnalyse() {
      const params = {
        code: this.selectValue === '' ? 'MP0003' : this.selectValue
      };
      const res = await queryGasAnalyse(params);
      if (res.data.code === 200) {
        const resInfo = res.data.data;
        this.monitorLoc = resInfo.monitorLoc;
        const data = [];
        data.push({
          num: resInfo.todayQuantity,
          data: resInfo.todayAnalyse.map(item => {
            return {
              ...item,
              time: xFormat(item.time)
            };
          })
        });
        data.push({
          num: resInfo.sevenQuantity,
          data: resInfo.sevenAnalyse
        });
        data.push({
          num: resInfo.thirtyQuantity,
          data: resInfo.thirtyAnalyse
        });

        this.chartLists = data;
      }
    }
  }
};

</script>
<style scoped lang="scss">
.gas-right-top-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9375rem;
  .position{
    display: flex;
    align-items: center;
    color: #ADADAD;
    font-size: .875rem;
    img{
      width: .875rem;
      height: .875rem;
      margin-right: .3125rem;
      vertical-align: center;
    }
  }
}
</style>
